Skip to content

Add exceptions for unit tests and JSX structure#1353

Open
labkey-jeckels wants to merge 2 commits intodevelopfrom
fb_reactPlateDesigner
Open

Add exceptions for unit tests and JSX structure#1353
labkey-jeckels wants to merge 2 commits intodevelopfrom
fb_reactPlateDesigner

Conversation

@labkey-jeckels
Copy link
Copy Markdown
Contributor

Rationale

We like unit tests and well structured JSX/TSX. Make sure Claude Code does too.

Related Pull Requests

Changes

  • Specific guidance for what we want to see in JSX/TSX
  • Specific guidance for unit tests for React code

Copy link
Copy Markdown
Contributor

@labkey-martyp labkey-martyp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I haven't tried it out, but looks like a good rule.


### Suggested Fix

Create `Component.test.tsx` with meaningful assertions per [`jest/business-logic.md`](../../jest/business-logic.md):
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't this path just be ../jest/business-logic.md?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Fixed.

Comment on lines +82 to +89
// ❌ Custom hook with async logic but no tests
const useCustomFetch = (url: string) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url).then(res => res.json()).then(setData);
}, [url]);
return data;
};
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Claude is flagging this as bad code example because it's missing error handling and cleanup, which could encourage an LLM to use this. Here's the recommended code.

// ❌ Custom hook with async logic but no tests
  const useCustomFetch = <T,>(url: string): T | null => {
      const [data, setData] = useState<T | null>(null);
      useEffect(() => {
          const controller = new AbortController();
          fetch(url, { signal: controller.signal })
              .then(res => res.json())
              .then(setData)
              .catch(() => { /* ignore aborts/errors for brevity */ });
          return () => controller.abort();
      }, [url]);
      return data;
  };

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is interesting. It IS a bad code example, though its intent is to be bad in a different way (lacking tests, not bad error handling).

Do we need our examples of bad code to be good in ways other than the specific problem they're intending to call out? The downside is overly verbose examples and token bloat.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am not sure how useful these code examples are because we cannot use fetch anywhere, and as a result cannot use AbortControllers. We'd need to release a 2.x version of @labkey/api for this to be relevant to us. This is something we should do, and I was just talking with Nick about it the other day because I want to use AbortControllers, but there isn't really a path forward for us to use either because all of our API requests are done via Ajax.request

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a low priority call out by claude, but I suspect what you might get is an LLM adds tests to the bad example and thinks it is now good code to use as a reference. Even though it has other issues. Maybe something to research further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants